<template>
  <div>
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="form"
        :model="containerForm"
        :rules="rules"
        :disabled="operation === 0"
        label-width="125px"
        label-position="right"
        label-suffix=":"
      >
        <el-form-item
          v-if="operation !== 1"
          :label="$t('containerLang.containerStatus')"
        >
          <div style="margin-left: 5px">
            {{
              $t(
                "statusLang." +
                  getTitleByValue(
                    containerStatusOptions,
                    containerForm.containerStatus
                  )
              )
            }}
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('depotLang.depot')"
          :prop="operation === 1 ? 'depotId' : ''"
        >
          <el-select
            v-model="containerForm.depotId"
            :placeholder="$t('pleaseSelect')"
            style="width: 100%"
            :disabled="operation !== 1"
            @change="changeDepot"
          >
            <el-option
              v-for="item in regionList"
              :key="item.value"
              :value="item.value"
              :label="item.title"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('containerLang.containerType')"
          prop="containerTypeId"
        >
          <el-select
            v-model="containerForm.containerTypeId"
            :placeholder="$t('pleaseSelect')"
            @change="changeContainerType"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in containerTypeList"
              :key="item.value"
              :value="item.value"
              :label="item.title"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('unitLang.sizeType')" prop="sizeType">
          <el-radio-group v-model="containerForm.sizeType" disabled>
            <el-radio
              v-for="item in sizeTypeOptionList"
              :key="item.value"
              :label="item.value"
              >{{ $t("unitLang." + item.title) }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <div v-if="containerForm.sizeType !== 0">
          <el-form-item
            :label="$t('unitLang.length') + '(CM)'"
            prop="containerLength"
          >
            <el-input
              v-model="containerForm.containerLength"
              :placeholder="$t('pleaseEnter')"
              clearable
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item
            :label="$t('unitLang.width') + '(CM)'"
            prop="containerWidth"
          >
            <el-input
              v-model="containerForm.containerWidth"
              :placeholder="$t('pleaseEnter')"
              clearable
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item
            :label="$t('unitLang.height') + '(CM)'"
            prop="containerHeight"
          >
            <el-input
              v-model="containerForm.containerHeight"
              :placeholder="$t('pleaseEnter')"
              clearable
              style="width: 100%"
            />
          </el-form-item>
        </div>
        <el-form-item :label="$t('containerLang.containerCode')" required>
          <el-input
            v-model="containerForm.containerCode"
            :placeholder="$t('pleaseEnter') + $t('containerLang.containerCode')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('remark')" prop="remark">
          <el-input
            v-model="containerForm.remark"
            :placeholder="$t('pleaseEnter')"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="warning" plain size="small" @click="close">{{
          $t("cancel")
        }}</el-button>
        <el-button type="primary" size="small" @click="handleSubmit">{{
          $t("submit")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import to from "await-to-js";
import { sizeTypeDict, containerStatusDict } from "@/utils/dictData";
import { getDictOptionList, getTitleByValue } from "@/utils/dictUtils";
import {
  getDepotList,
  getDepotListAllStatus,
} from "@/api/business/depotManage/depot";
import {
  addDepotContainer,
  getDepotContainer,
  modifyDepotContainer,
} from "@/api/business/depotManage/container";
import { getDepotContainerTypeList } from "@/api/business/depotManage/containerType";
export default {
  name: "container",
  props: {
    value: {
      type: Number,
      default: null,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    operation: {
      type: Number,
      default: 0, //0 查看 1 新增 2 修改
    },
    title: {
      type: String,
      default: null,
    },
    width: {
      type: String,
      default: "750px",
    },
  },
  data() {
    return {
      regionList: [],
      containerTypeList: [],
      containerForm: {
        depotId: null,
        containerTypeId: null,
        sizeType: null,
        containerLength: null,
        containerWidth: null,
        containerHeight: null,
        containerCode: null,
        remark: null,
      },
      getTitleByValue: getTitleByValue,
      containerStatusOptions: getDictOptionList(containerStatusDict), //状态下拉
      sizeTypeOptionList: getDictOptionList(sizeTypeDict), //三围
      rules: {
        depotId: {
          required: true,
          message: this.$t("pleaseSelect") + " " + this.$t("depotLang.depot"),
          trigger: "change",
        },
        containerTypeId: {
          required: true,
          message: this.$t("pleaseSelect"),
          trigger: "change",
        },
        sizeType: {
          required: true,
          message: this.$t("pleaseSelect"),
          trigger: "change",
        },
        containerLength: [
          {
            required: true,
            message: this.$t("pleaseEnter") + " " + this.$t("unitLang.length"),
            trigger: "blur",
          },
          {
            pattern: /^[0-9]*$/,
            message: this.$t("onlyNumber"),
            trigger: "blur",
          },
        ],
        containerWidth: [
          {
            required: true,
            message: this.$t("pleaseEnter") + " " + this.$t("unitLang.width"),
            trigger: "blur",
          },
          {
            pattern: /^[0-9]*$/,
            message: this.$t("onlyNumber"),
            trigger: "blur",
          },
        ],
        containerHeight: [
          {
            required: true,
            message: this.$t("pleaseEnter") + " " + this.$t("unitLang.height"),
            trigger: "blur",
          },
          {
            pattern: /^[0-9]*$/,
            message: this.$t("onlyNumber"),
            trigger: "blur",
          },
        ],
        containerCode: {
          required: true,
          message: this.$t("notNull"),
          trigger: "blur",
        },
      },
    };
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData();
        }
      },
    },
  },

  created() {
    this.getData();
    this.getDepotList();
    this.getAllDepotList();
  },

  methods: {
    reset() {
      this.containerForm = {
        depotId: null,
        containerTypeId: null,
        sizeType: null,
        containerLength: null,
        containerWidth: null,
        containerHeight: null,
        containerCode: null,
        remark: null,
      };
      this.$refs.form.resetFields();
    },
    // 数据回显
    async getData() {
      if (!this.value || this.operation === 1) return;
      const res = await getDepotContainer({
        containerId: this.value,
        modifiedUser: 0,
      });
      if (!res || res.returnCode === null) return;
      this.containerForm = res.data;
      const { data } = await getDepotContainerTypeList({
        depotId: res.data.depotId,
      });
      console.log(data);
      this.containerTypeList = data;
    },
    // 获取仓库下拉
    async getDepotList() {
      const { data } = await getDepotList();
      console.log(data);
      this.regionList = data;
    },
    // 获取所有仓库下拉
    async getAllDepotList() {
      const { data } = await getDepotListAllStatus();
      console.log(data);
    },
    // 流转箱类型下拉
    async changeDepot(value) {
      this.containerForm.containerTypeId = null;
      // 根据仓库id ==> 流转箱类型下拉
      const res = await getDepotContainerTypeList({
        depotId: value,
      });
      console.log(res);
      this.containerTypeList = res.data;
    },
    changeContainerType(value) {
      const data = this.containerTypeList.filter((item) => {
        if (item.value === value) {
          return item;
        }
      });
      console.log(data);
      this.containerForm.sizeType = data[0].sizeType;
    },
    async handleSubmit() {
      console.log(this.$refs);
      const [err] = await to(this.$refs.form.validate());
      console.log(err);
      if (err === null) {
        if (this.operation === 1) {
          const res = await addDepotContainer({
            ...this.containerForm,
          });
          console.log(res);
          if (!res || res.returnCode !== 10000) return;
        } else if (this.operation === 2) {
          const res = await modifyDepotContainer({ ...this.containerForm });
          if (!res || res.returnCode !== 10000) return;
        }
        this.$message.success({ message: this.$t("handleSuccess") });
        this.$emit("close");
        this.$emit("updata:operation", 2);
      }
    },
    // 关闭弹窗
    close() {
      this.$emit("close");
    },
    // 关闭弹窗
    closed() {
      this.reset();
    },
    // 提交
  },
};
</script>

<style>
.el-radio__input.is-disabled + span.el-radio__label {
  color: #82848a;
  cursor: not-allowed;
}
.el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #1682e6;
  border-color: #dfe4ed;
}
</style>
